<!DOCTYPE html>
<html lang="en">

<!-- TODO:需要将所有**href，src**引用改为thymeleaf的方式 -->

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta http-equiv="x-ua-compatible" content="ie=edge">

  <title>博物馆文物后台管理系统</title>

  <!-- 共有的部分，抽取到fragment-->
  <link rel="icon" href="../dist/img/logoico1.ico" type="image/ico" />
  <link rel="stylesheet" href="../plugins/fontawesome-free/css/all.min.css">
  <link rel="stylesheet" href="../dist/css/adminlte.min.css">
  <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet">

  <!-- 只有自己引用 -->
  <link rel="stylesheet" href="../plugins/ekko-lightbox/ekko-lightbox.css">
  <link rel="stylesheet" href="../plugins/sweetalert2-theme-bootstrap-4/bootstrap-4.min.css">
  <link rel="stylesheet" href="../site/recorded/recorded.css">


</head>

<body class="hold-transition sidebar-mini">
  <div class="wrapper">

    <nav class="main-header navbar navbar-expand navbar-white navbar-light" style="position: relative;">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link" data-widget="pushmenu" href="#"><i class="fas fa-bars"></i></a>
        </li>
      </ul>
      <div style="position: absolute;right: 15px;">
        <!-- TODO:href为注销的路径 -->
        <a class="btn btn-navbar" href="#">
          <i class="fa fa-door-open"></i>
          退出登录
        </a>
      </div>
    </nav>

    <aside class="main-sidebar sidebar-dark-primary elevation-4">
      <a href="#" class="brand-link">
        <img src="../dist/img/logo.png" style="object-fit: cover;background-color: aliceblue;" alt="AdminLTE Logo"
          class="brand-image img-circle elevation-3" style="opacity: .8">
        <span class="brand-text font-weight-light">文物后台管理</span>
      </a>
      <div class="sidebar">
        <div class="user-panel mt-3 pb-3 mb-3 d-flex">
          <div class="image">
            <img src="../dist/img/avatar5.png" class="img-circle elevation-2" alt="User Image">
          </div>
          <div class="info">
            <!-- TODO:张三-文职 需要数据用户名和职务 -->
            <a href="#" class="d-block">张三-文职</a>
          </div>
        </div>

        <nav class="mt-2">
          <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
            <!-- TODO:侧边栏导航，href路径改为真实路径 -->
            <li class="nav-item has-treeview">
              <a href="./info.html" class="nav-link">
                <i class="nav-icon fas fa-th"></i>
                <p>
                  文物信息管理
                  <i class="right fas fa-angle-left"></i>
                </p>
              </a>
              <ul class="nav nav-treeview">
                <li class="nav-item">
                  <a href="./info.html" class="nav-link">
                    <i class="far fa-circle nav-icon"></i>
                    <p>文物信息一览</p>
                  </a>
                </li>
                <li class="nav-item">
                  <a href="./recorded.html" class="nav-link">
                    <i class="far fa-circle nav-icon"></i>
                    <p>文物信息录入</p>
                  </a>
                </li>
              </ul>
            </li>
            <li class="nav-item">
              <a href="./flow.html" class="nav-link">
                <i class="nav-icon fa fa-recycle"></i>
                <p>
                  文物流动管理
                </p>
              </a>
            </li>
            <li class="nav-item">
              <a href="./inventory.html" class="nav-link">
                <i class="nav-icon fa fa-balance-scale"></i>
                <p>
                  文物盘点管理
                </p>
              </a>
            </li>
            <li class="nav-item">
              <a href="./warehouse.html" class="nav-link">
                <i class="nav-icon fa fa-university"></i>
                <p>
                  仓库管理
                </p>
              </a>
            </li>
            <li class="nav-item">
              <a href="./profile.html" class="nav-link">
                <i class="nav-icon fas fa-user-circle"></i>
                <p>
                  员工管理
                </p>
              </a>
            </li>
          </ul>
        </nav>
      </div>
    </aside>
    <!-- TODO:这个页面稍微有些复杂，有多个ajax文件，如果有错误，可以查看recored.js的逻辑代码,也可以找我修改 -->
    <!-- TODO:有些实现功能逻辑可能不是很好，如果自己有更好的实现方法，可以自行修改 -->
    <!-- 内容 -->
    <div class="content-wrapper">
      <div class="content-header">
        <div class="container-fluid">
          <div class="row mb-2">
            <div class="col-sm-6">
              <h1>待录入信息文物(8)</h1>
            </div>
          </div>
        </div><!-- /.container-fluid -->
      </div>
      <div class="content">
        <div class="container-fluid">
          <div class="row">
            <div class="col-12">
              <div class="card">
                <div class="card-header">
                  <!-- TODO:搜索框 ，如果不需要这个功能可以删除-->
                  <div class="card-tools">
                    <div class="input-group input-group-sm" style="width: 200px;">
                      <input type="text" name="table_search" class="form-control float-right" placeholder="搜索">
                      <div class="input-group-append">
                        <button type="submit" class="btn btn-default"><i class="fas fa-search"></i></button>
                      </div>
                    </div>
                  </div>
                  <div class="btn-group">
                    <button type="button" class="btn btn-outline-primary btn-sm dropdown-toggle" data-toggle="dropdown"
                      aria-haspopup="true" aria-expanded="false">
                      <i class="fa fa-filter"></i>
                      筛选
                    </button>
                    <div class="dropdown-menu">
                      <!-- TODO:这里的href需要更改为获取数据的url -->
                      <a class="dropdown-item" href="#">全部</a>
                      <a class="dropdown-item" href="#">待文职录入信息</a>
                      <a class="dropdown-item" href="#">待资产科估值</a>
                      <a class="dropdown-item" href="#">未入库</a>
                    </div>
                  </div>
                  <div style="display: inline-block;">
                    <!-- 触发批量导入模态框 -->
                    <button class="btn btn-outline-info btn-sm" data-toggle="modal" data-target="#modal-import-execl">
                      <i class="fa fa-file-excel"></i>
                      批量导入
                  </div>
                </div>
                <div class="card-body">
                  <div class="row" id="recordedContainer">
                    <!-- TODO:循环遍历这部分 -->
                    <div class="col-md-3 col-sm-6 col-12 recoded-item bg-light">
                      <div class="card pt-0" style="width: 100%;">
                        <a data-toggle="lightbox" data-title="唐三彩"
                          href="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3762127541,3137938035&fm=26&gp=0.jpg">
                          <img
                            src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3762127541,3137938035&fm=26&gp=0.jpg"
                            class="card-img-top" alt="文物图片">
                        </a>
                        <div class="card-body">
                          <h5 class="card-title">暂未编辑</h5>
                          <p class="card-text">待资产科估值</p>
                        </div>
                        <div class="card-footer">
                          <!-- TODO:这里的href为获取当前选择文物的具体信息 -->
                          <!-- 具体的json格式
                            {
                            "name": "唐三彩",
                            "years": "唐朝",
                            "ynum": "元宗",
                            "material": "彩釉陶瓷",
                            "state": 0,
                            "count": 4,
                            "warehouse": "西南角",
                            "shelves": "1排3列",
                            "inWorth": "1,000,000",
                            "outWorth": null,
                            "size": "50x30cm",
                            "donor": null,
                            "createTime": "2020-5-4",
                            "operationTime": "2020-5-20",
                            "remark": [
                            "备注1",
                            "备注2",
                            "备注3"
                            ],
                            "pic": [
                              "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3061054327,1595563043&fm=26&gp=0.jpg",
                            ],
                            "qrPic":
                            "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1588669812370&di=6d9630c27a5ed9f3f4a597a40d7b7dc5&imgtype=0&src=http%3A%2F%2Fbpic.588ku.com%2Felement_origin_min_pic%2F01%2F37%2F30%2F36573c45d2efb52.jpg"
                            }
                          -->
                          <a href="http://rap2.taobao.org:38080/app/mock/252965/wenwu/id"
                            class="btn btn-secondary btn-sm toggle-edit-modal-btn">
                            <i class="fa fa-edit" aria-hidden="true"></i>
                            编辑</a>
                          <!-- TODO:这里的href为删除文物的路径,重定向后路径需要带query result=1-->
                          <a href="./recorded.html" class="btn btn-danger btn-sm delete-confirm-btn">
                            删除</a>
                        </div>
                      </div>
                    </div>
                    <!-- /.col -->
                  </div>
                </div>
                <!-- 分页 -->
                <div class="card-footer clearfix">
                  <ul class="pagination pagination-sm m-0 float-right">
                    <!-- TODO:需要根据数据库条数判断-->
                    <li class="page-item"><a class="page-link" href="#">&laquo;</a></li>
                    <li class="page-item"><a class="page-link" href="#">1</a></li>
                    <li class="page-item"><a class="page-link" href="#">2</a></li>
                    <li class="page-item"><a class="page-link" href="#">3</a></li>
                    <li class="page-item"><a class="page-link" href="#">&raquo;</a></li>
                  </ul>
                </div>
              </div>
              <!-- /.card-body -->
            </div>
            <!-- /.card -->
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- 编辑文物信息模态框 -->
  <div class="modal fade" id="modal-edit-relic" tabindex="-1" role="dialog"
    aria-labelledby="exampleModalScrollableTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-scrollable" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title">编辑文物信息</h4>
          <button type="button" class="close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <!-- TODO:action为编辑文物的接口,编辑成功需要返回result=3 -->
          <form class="form-horizontal" action="#" method="POST">
            <div class="form-group">
              <label for="inputEditName">文物名称</label>
              <input type="text" class="form-control" id="inputEditRelicName" name="name" placeholder="文物名称">
            </div>
            <div class="form-group">
              <label for="inputEditYears">年代</label>
              <div>
                <input type="text" class="form-control" id="inputEditYears" name="years" placeholder="年代">
              </div>
            </div>
            <div class="form-group">
              <label for="inputEditYnum">年号</label>
              <div>
                <input type="text" class="form-control" id="inputEditYnum" name="ynum" placeholder="年号">
              </div>
            </div>
            <div class="form-group">
              <label for="inputEditMaterial">器材/材质</label>
              <div>
                <input type="text" class="form-control" id="inputEditMaterial" name="material" placeholder="器材/材质">
              </div>
            </div>
            <div class="form-group">
              <label for="inputEditCount">数量</label>
              <div>
                <input type="text" class="form-control" id="inputEditCount" name="count" placeholder="数量">
              </div>
            </div>
            <div class="form-group">
              <label for="inputEditWarehouse">收储仓库</label>
              <div>
                <select class="form-control" name="warehouse" id="inputEditWarehouse">
                  <option value="东南角">东南角</option>
                  <option value="西南角">西南角</option>
                </select>
              </div>
            </div>
            <div class="form-group">
              <label for="inputEditShelves">货架号</label>
              <div>
                <input type="text" class="form-control" id="inputEditShelves" name="shelves" placeholder="货架号">
              </div>
            </div>

            <!-- TODO:需要判断是资产科还是文职人员，如果是资产科人员需要将disabled去掉 -->
            <div class="form-group">
              <label for="inputEditInWorth">入馆价值</label>
              <div>
                <input type="text" class="form-control" disabled id="inputEditInWorth" name="inWorth"
                  placeholder="入馆价值">
              </div>
            </div>
            <div class="form-group">
              <label for="inputEditOutWorth">出馆价值</label>
              <div>
                <input type="text" class="form-control" disabled id="inputEditOutWorth" name="outWorth"
                  placeholder="出馆价值">
              </div>
            </div>
            <div class="form-group">
              <label for="inputEditSize">尺寸</label>
              <div>
                <input type="text" class="form-control" id="inputEditSize" name="size" placeholder="尺寸">
              </div>
            </div>
            <div class="form-group">
              <label for="inputEditDonor">捐赠者/来源</label>
              <div>
                <input type="text" class="form-control" id="inputEditDonor" name="donor" placeholder="捐赠者/来源">
              </div>
            </div>
            <div class="form-group">
              <label for="inputEditCreateTime">收储时间</label>
              <div>
                <input type="text" class="form-control" id="inputEditCreateTime" disabled name="createTime"
                  placeholder="收储时间">
              </div>
            </div>
            <div class="form-group">
              <label for="inputEditRemark">备注</label>
              <div>
                <input type="text" class="form-control" id="inputEditRemark" name="remark" placeholder="多个备注用,分开">
              </div>
            </div>
            <div class="form-group">
              <label>图片</label>
              <!--TODO: 隐式输入框，传递imageurl,用逗号分隔 -->
              <input type="hidden" name="imagesUrl">
              <div>已上传</div>
              <!-- 已上传区 -->
              <div class="row img-group" id="uploadedImageArea">
                <!-- 已上传图片模板 -->
                <script type="text/html" id="imgUploadedComponent">
                  <div class="img-wapper">
                    <a data-gallery="gallery-uploaded" data-toggle="lightbox" data-title="文物图片" href="#">
                      <img src="#" alt="文物图片">
                    </a>
                    <!-- TODO:href为删除已上传文物图片的路径,ajaxGet请求,删除参数为targetImgUrl(图片的url),如果成功返回{code:2000,msg:"删除成功"},失败{code:4000,msg:"失败原因"} -->
                    <a href="#" class="del-btn btn btn-outline-danger">删除</a>
                  </div>
                </script>
              </div>
              <hr>
              <!-- 图片预览区 -->
              <div id="uploadPicArea">
                <div style="margin-bottom: 10px;">
                  <span>添加图片</span>
                  <!-- TODO:href为多文件(图片)上传的路径,ajaxPost请求,文件参数为files,如果成功返回{code:2000,imgUrlList:["上传成功后图片的路径数组"],msg:"上传成功"},失败{code:4000,msg:"失败原因"} -->
                  <a href="#" class="upload-btn btn btn-primary btn-sm upload-btn-disabled" id="uploadBtn">上传</a>
                </div>
                <!-- 图片新上传预览区 -->
                <div class="row img-group" id="previewUploadImages">
                  <!-- 图片预览模板 -->
                  <script type="text/html" id="imgComponent">
                    <div class="img-wapper">
                      <a data-gallery="gallery-preview" data-toggle="lightbox" data-title="文物图片" href="#">
                        <img src="#" alt="文物图片">
                      </a>
                      <button class="del-btn btn btn-outline-danger">删除</button>
                    </div>
                  </script>
                  <div class="file">
                    <span>+</span>
                    <input type="file" id="inputFile" accept="image/*" form="otherForm">
                  </div>
                </div>
              </div>
            </div>
            <div class="form-group">
              <label>二维码</label>
              <div>
                <input type="hidden" name="qrPic">
                <div class="row img-group" id="qrImage">
                  <div class="img-wapper">
                    <a data-gallery="gallery" data-toggle="lightbox" data-title="二维码" href="../dist/img/replace.png">
                      <img src="../dist/img/replace.png" alt="二维码">
                    </a>
                    <button class="del-btn btn btn-primary" type="button">
                      更换
                      <input type="file" accept="image/*" form="otherForm" id="qrReplaceInputFile"
                        style="opacity: 0;position: absolute;left: 0;">
                    </button>
                  </div>
                </div>
              </div>
              <!-- TODO:此href为上传二维码的路径，ajaxPost请求，文件(图片)的参数为file,如果成功返回{code:2000,msg:"上传成功"},失败{code:4000,msg:"失败原因"} -->
              <a href="#" class="btn btn-primary btn-sm upload-btn upload-btn-disabled" style="margin:8px 0px 0px 20px;"
                id="qrUpLoadBtn">上传</a>
            </div>
          </form>
        </div>
        <div class="modal-footer justify-content-between">
          <button type="button" class="btn btn-default cancel-button">取消</button>
          <button type="button" id="editRelicBtn" class="btn btn-primary">提交</button>
        </div>
      </div>
      <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
  </div>
  <!-- 编辑用户模态框 -->
  <div class="modal fade" id="modal-import-execl">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title">批量导入</h4>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <div class="form-group">
            <label for="excelInputFile">选择上传文件</label>
            <div class="input-group">
              <div class="custom-file">
                <input type="file" class="custom-file-input" id="excelInputFile">
                <label class="custom-file-label" for="excelInputFile">选择文件</label>
              </div>
              <div class="input-group-append">
                <!-- TODO:此href为批量导入的路径,ajaxPOST请求,参数为file(格式为.xlsx,.xls),如果成功返回{code:2000,msg:"上传成功"},失败{code:4000,msg:"失败原因"}-->
                <a href="#" class="btn btn-primary upload-btn-disabled" id="uploadExcelBtn">上传</a>
              </div>
            </div>
          </div>
          <p style="color: #ccc;">仅支持".xlsx"与".xls"</p>
        </div>
        <div class="modal-footer justify-content-between">
          <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
        </div>
      </div>
      <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
  </div>
  <aside class="control-sidebar control-sidebar-dark">
    <div class="p-3">
      <h5>Title</h5>
      <p>Sidebar content</p>
    </div>
  </aside>

  <footer class="main-footer">
    <div class="float-right d-none d-sm-inline">
      国家博物馆后台管理系统
    </div>
    <strong>Copyright &copy; 2020-2025 软件B班4组.</strong> All rights reserved.
  </footer>
  </div>
  <!-- 共有的部分 -->
  <script src="../plugins/jquery/jquery.min.js"></script>
  <script src="../plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
  <script src="../dist/js/common.js"></script>
  <script src="../dist/js/adminlte.min.js"></script>

  <!-- 只有自己引用 -->
  <!-- jquery-validation -->

  <script src="../plugins/jquery-validation/jquery.validate.min.js"></script>
  <script src="../plugins/jquery-validation/additional-methods.min.js"></script>
  <script src="../plugins/sweetalert2/sweetalert2.min.js"></script>
  <script src="../plugins/ekko-lightbox/ekko-lightbox.min.js"></script>
  <script src="../plugins/bs-custom-file-input/bs-custom-file-input.min.js"></script>
  <script src="../site/utils.js"></script>
  <script src="../site/recorded/recorded.js"></script>
</body>

</html>